<template>
	<view class="echart" id="mychart" :style="myChartStyle"></view>
</template>

<script>
	import * as echarts from "echarts";

	export default {
		name: "BarChart",
		props: {
			scoreData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				xData: null,
				xDataA: ["总分", "一分", "二分", "罚球", "盖帽", "犯规", "助攻", "抢断", "篮板"], //横坐标
				xDataB: ["总分", "二分", "三分", "罚球", "盖帽", "犯规", "助攻", "抢断", "篮板"],
				yData: [], //人数数据
				taskDate: [],
				myChartStyle: {
					width: "100%",
					height: "200px"
				}, //图表样式
				shujuData: {},
				scoring: -1
			};
		},
		mounted() {
			this.initEcharts();
		},
		methods: {
			initEcharts() {
				// this.shujuData = this.scoreData;
				let xData = this.scoreData.teamOneScoreMovementListList.map(item => 'Q' + item.subsection)
				let yData1 = this.scoreData.teamOneScoreMovementListList.map(item => item.score)
				let yData2 = this.scoreData.teamTwoScoreMovementListList.map(item => item.score)
				let legendArr = [
					this.scoreData.teamOneName + '  最多领先' + (this.scoreData.teamOneScoreMax || 0) + '分',
					this.scoreData.teamTwoName + '  最多领先' + (this.scoreData.teamTwoScoreMax || 0) + '分',
				]
				// 多列柱状图
				const mulColumnZZTData = {
					legend: {
						orient: 'vertical', // 垂直排列
						data: legendArr
					}, // 图例
					grid: {
						top: '30%',
						left: '5%',
						right: '5%',
						bottom: '10%',
						containLabel: true
					}, // 防止右侧坐标轴溢出
					xAxis: {
						boundaryGap: false, //是否有间隔第一格
						type: 'category',
						data: xData,
						axisTick: {
							show: false
						}, // 完全关闭刻度线
						// 添加 x 轴网格线（纵向）
						splitLine: {
							show: true,
							lineStyle: {
								color: '#EEE',
								type: 'solid' // 可选虚线样式
							}
						},
						axisLine: {
							lineStyle: {
								color: '#EEE' // x 轴线颜色（底部刻度线）
							}
						},
						axisLabel: {
							color: '#666' // x 轴文字颜色
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							// show: false,  // 隐藏刻度标签
							// rotate: '90',
							position: 'right'
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#EEE', // 与轴线同色
							}
						}
					},
					series: [{
							name: legendArr[0],
							data: yData1,
							type: 'line',
							symbol: 'none', // 去掉折线节点圆点
							itemStyle: {
								color: '#54AB76'
							},
							smooth: true
						},
						{
							name: legendArr[1],
							data: yData2,
							type: 'line',
							symbol: 'none',
							itemStyle: {
								color: '#01838C'
							},
							smooth: true
						}
					]
				};
				const myChart = echarts.init(document.getElementById("mychart"));
				myChart.setOption(mulColumnZZTData);
				///新增获取base64 绘制后的图start
				setTimeout(() => {
					const chartImg = myChart.getDataURL({
						type: 'png',
						pixelRatio: 2,
					});
					this.$emit('getEchartBase64URL', chartImg)
				}, 1500)
				///新增获取base64 绘制后的图end
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.echart {
		box-sizing: border-box;
		width: 100%;
		// padding-top: 5%;
		display: flex;
		align-items: center;
		justify-content: center;
		// min-width: 800px;
		min-width: 200px;
	}
</style>